<template>
  <div class="xbsj-mainbar-popup popup" ref="searchbox">
    <div v-show="loading">{{lang.searching}}</div>
    <div v-show="error!=''">{{error}}</div>
    <ul>
      <li v-show="results.length!=''" v-for="(item,index) in results" :key="index">
        <div class="xbsj-search-item" @click="selectItem(item)">
          <div>{{item.name}}</div>
          <span>{{lang.position}}</span>
          <div class="xbsj-weizhi">
            <span>{{item.location.lng.toFixed(5)}}</span>
            <span>{{item.location.lat.toFixed(5)}}</span>
          </div>
          <div>
            <span>{{item.province}}</span>-
            <span>{{item.city}}</span>-
            <span>{{item.district}}</span>
          </div>
          <div class="xbsj-map">{{lang.provider}}-{{item.provider}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      langs: {
        zh: {
          searching: "正在查询...",
          position: "位置:",
          provider: "来自-"
        },
        en: {
          searching: "search ...",
          position: "Position:",
          provider: "Provider-"
        }
      },
      lang: undefined,
      loading: false,
      error: "",
      results: []
    };
  },
  created() {
    
  },
  mounted() {},
  methods: {
    query(key) {
      this.loading = true;
      this.error = "";
      this.results = [];

      this.$root.$labServer
        .geocoder(key)
        .then(result => {
          this.loading = false;
          this.results = result;
        })
        .catch(error => {
          this.loading = false;
          this.error = error.message || error;
        });
    },
    newView(item) {
      let cvm = this.$root.$earth.cameraViewManager;
      cvm
        .newView()
        .then(view => {
          view.name = item.name;
          cvm.views.push(view);
        })
        .catch(err => {
          console.log(err);
        });
    },
    selectItem(item) {
      this.$emit("itemSelected", item);
      let viewer = this.$root.$earth.czm.viewer;

      if (this._entity) this.clear();

      //创建定位图标 并飞行
      this._entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
          item.location.lng,
          item.location.lat
        ),
        billboard: {
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          pixelOffset: new Cesium.Cartesian2(-18, 0),
          image:
            ""
        },
        label: {
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          text: item.name,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          font: "35px 楷体",
          fillColor: new Cesium.Color(0, 1, 1, 1),
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 6,
          scale: 0.5,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        },
        contextMenus: [
          {
            text: "保存视角",
            keys: "",
            func: () => {
              this.newView(item);
            }
          }
        ]
      });

      viewer.flyTo(this._entity, {
        offset: new Cesium.HeadingPitchRange(0, -1.7, 1000),
        duration: 1
      });
    },
    clear() {
      if (this._entity) {
        let viewer = this.$root.$earth._viewer;
        viewer.entities.remove(this._entity);
        this._entity = undefined;
      }
    }
  }
};
</script>
<style scoped>
.popup {
  width: 270px;
  height: 276px;
  top: 120px;
  left: 389px;
  overflow: auto;
  padding: 10px 10px;
}
.popup ul li {
  list-style: none;
  border-bottom: 1px solid;
}
.popup::-webkit-scrollbar {
  width: 4px;
}
.popup::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.popup::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.xbsj-map {
  text-align: right;
}
.xbsj-weizhi {
  display: inline-block;
}
.xbsj-search-item {
  cursor: pointer;
}
.xbsj-search-item:hover {
  background: rgba(107, 107, 107, 1);
}
</style>

